<!--结算管理-向供应商结算-采购单详情 -->
<template>
  <div class="before-distributor-settlement-toSupplier">
    <el-container class="registercard-box">
      <!--  -->
      <el-tabs>
        <el-tab-pane label="订单信息">
          <RecordInfo
            :record-form="headerConfirmedColumns"
            :record-data="{}" />
          <h3>订单明细</h3>
          <!-- 表单模块 -->
          <el-editable
            class="hospital-edit-box"
            :data="table.settlemList"
            :height='200'
            :columns="orderInformationColumns"
            :custom-attr="$TABLE_HEAD['auxiliary.barcodeRules.list']"
          />
          <el-pagination
            align="right"
            style="margin-top:20px;"
            @size-change="sizeChange"
            @current-change="pageChange"
            :page-sizes="page.PAGE_NUMBER"
            :page-size="page.size"
            :current-page="page.page"
            :layout="page.PAGINATION_LAYOUT"
            :total="page.total"
          />
        </el-tab-pane>
        <el-tab-pane label="发货信息">
          <div>
            <RecordInfo
              :record-form="shippingInformationColumns"
              :record-data="{}"
            />
            <h3>配送明细</h3>
            <RecordZoomCard
              :card-data="[]"
              :card-columns="cardConfirmedColumns"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="收货信息">
          <div>
            <RecordInfo
              :record-form="receivingInformationColumns"
              :record-data="{}"
            />
            <h3>收货明细</h3>
            <RecordZoomCard
              :card-data="[]"
              :card-columns="cardReceiptDetailsColumns"
              :show-list="true"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 表单模块 -->

      <!-- 分页模块 -->
    </el-container>
  </div>
</template>

<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import paginationMixin from '@mixins/paginationMixin'
import ElEditable from '@components/el-editable'
import RecordInfo from '@/moduleComponents/common/detail/recordInfo'
import RecordZoomCard from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/accompaniedbygoods'
import {
  headerConfirmedColumns,
  orderInformationColumns,
  shippingInformationColumns,
  cardConfirmedColumns,
  receivingInformationColumns,
  cardReceiptDetailsColumns
} from './const'
import { authItemInStoreQuery } from '@const/productCenterApiV2'
import { hasIn } from 'lodash'
export default {
  name: 'BeforeDistributorSettlementToSupplier',
  mixins: [paginationMixin],
  data () {
    return {
      headerConfirmedColumns,
      orderInformationColumns,
      shippingInformationColumns,
      cardConfirmedColumns,
      receivingInformationColumns,
      cardReceiptDetailsColumns,
      table: {
        settlemList: []
      },
      page: {
        PAGE_NUMBER,
        PAGINATION_LAYOUT
      }
    }
  },
  mounted () {
    this.getItems()
  },
  methods: {
    // 获取列表
    getItems () {
      // Loading加载开始
      // 请求列表数据
      this.$axios({
        method: 'post',
        url: authItemInStoreQuery,
        data: {}
      })
        .then(res => {
          let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
          this.table.settlemList = obj.content
          this.page.total = obj.totalElements
        })
        .finally(res => {})
    }
  },
  components: {
    RecordInfo,
    ElEditable,
    RecordZoomCard
  }
  // 获取列表
}
</script>
<style lang="less">
.before-distributor-settlement-toSupplier {
  height: 100%;
  display: flex;

  .registercard-box {
    flex-direction: column;

    .el-form-item__label {
      width: 110px !important;
    }
    .price {
      color: red;
    }
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .is-active {
          font-size: 24px !important;
        }
      }
    }
  }
  .header-limit {
    .el-input__inner {
      width: 200px;
    }
    .el-date-editor {
      width: 368px;
    }
  }
}
</style>
